<template>
  <div class="mx-auto w-4/5 py-4" id="container">
    <a-row :gutter="16" id="main-row">
      <!-- 左侧内容 -->
      <a-col :span="17" id="left-col">
        <!-- 轮播图 -->
        <a-carousel autoplay id="carousel">
          <a-image class="w-full" src="https://picsum.photos/id/2/1280/320" id="carousel-image" />
        </a-carousel>

        <!-- 卡片列表 -->
        <a-card v-for="i in 5" :key="i" class="p-5 my-4" :id="`card-${i}`">
          <a-typography-title :level="4" class="text-xl font-bold" :id="`card-title-${i}`">标题</a-typography-title>
          <a-typography-text class="text-base" :id="`card-text-${i}`">文本</a-typography-text>
          <a-row :gutter="16" class="mt-4" :id="`card-image-row-${i}`">
            <a-col :span="8" :id="`card-image-col-1-${i}`">
              <a-image class="aspect-[5/2] w-full" src="https://picsum.photos/id/1/300/100" alt="" :id="`card-image-1-${i}`" />
            </a-col>
            <a-col :span="8" :id="`card-image-col-2-${i}`">
              <a-image class="aspect-[5/2] w-full" src="https://picsum.photos/id/1/300/100" alt="" :id="`card-image-2-${i}`" />
            </a-col>
            <a-col :span="8" :id="`card-image-col-3-${i}`">
              <a-image class="aspect-[5/2] w-full" src="https://picsum.photos/id/1/300/100" alt="" :id="`card-image-3-${i}`" />
            </a-col>
          </a-row>
          <a-row class="flex justify-between mt-4" :id="`card-footer-row-${i}`">
            <a-col :id="`card-footer-left-${i}`">
              <a-space :id="`card-footer-space-${i}`">
                <a-avatar size="small" :id="`card-avatar-${i}`">
                  <template #icon><UserOutlined /></template>
                </a-avatar>
                <a-typography-text :id="`card-visitor-${i}`" class="mr-2">游客</a-typography-text>
                <FieldTimeOutlined :id="`card-time-icon-${i}`" />
                <a-typography-text :id="`card-time-${i}`">2025-01-01</a-typography-text>
              </a-space>
            </a-col>
            <a-col :id="`card-footer-right-${i}`">
              <a-typography-text :id="`card-read-more-${i}`">查看全文 &lt;</a-typography-text>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <!-- 右侧内容 -->
      <a-col :span="6" id="right-col">
        <!-- 搜索卡片 -->
        <a-card class="mb-4" id="search-card">
          <a-typography-title
            :level="5"
            class="text-base font-bold pl-2.5 mt-2.5 mb-2.5 relative before:content-[''] before:block before:w-0.5 before:h-full before:bg-red-500 before:absolute before:left-0 before:top-0"
            id="search-title"
          >
            搜索
          </a-typography-title>
          <a-input class="w-full p-2.5 h-24 border-none" id="search-input" />
          <a-button
            class="absolute right-2.5 bottom-2.5 bg-red-400 text-white text-base p-2.5 flex justify-center items-center"
            id="search-button"
          >
            搜索
          </a-button>
        </a-card>

        <!-- 最近发表卡片 -->
        <a-card class="mb-4" id="recent-posts-card">
          <a-typography-title
            :level="5"
            class="text-base font-bold pl-2.5 mt-2.5 mb-2.5 relative before:content-[''] before:block before:w-0.5 before:h-full before:bg-red-500 before:absolute before:left-0 before:top-0"
            id="recent-posts-title"
          >
            最近发表
          </a-typography-title>
          <a-list id="recent-posts-list">
            <a-typography-link href="#" :id="`recent-post-link-${index}`" v-for="(item, index) in 10" :key="index">
              <a-typography-paragraph ellipsis class="!mb-2 ml-5" :id="`recent-post-paragraph-${index}`"> 111 </a-typography-paragraph>
            </a-typography-link>
          </a-list>
        </a-card>

        <!-- 标签列表卡片 -->
        <a-card class="mb-4" id="tags-card">
          <a-typography-title
            :level="5"
            class="text-base font-bold pl-2.5 mt-2.5 mb-2.5 relative before:content-[''] before:block before:w-0.5 before:h-full before:bg-red-500 before:absolute before:left-0 before:top-0"
            id="tags-title"
          >
            标签列表
          </a-typography-title>
          <a-space id="tags-list">
            <a-checkable-tag v-for="(tag, index) in ['Movies', 'Books', 'Music', 'Sports']" :key="index" :id="`tag-${index}`">
              {{ tag }}
            </a-checkable-tag>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="jsx">
  // 脚本部分保持不变
</script>

<style></style>